<template>
  <div class="lix-container">
    <div class="lix-gd__header">
      <van-swipe :autoplay="3000" :height="360">
        <van-swipe-item v-for="(item, index) in sku.goodsinfo.album" :key="index">
          <img v-lazy="item.path" class="swipeimg"/>
        </van-swipe-item>
      </van-swipe>
      <div class="buynum">19283人购买</div>
    </div>
    <div class="lix-gd__info-container">
      <div class="lix-gd__priceinfo">
        <div class="price">￥{{ sku.sku.min_price }} - {{ sku.sku.max_price }}</div>
        <div class="tips-container">
          <div>折扣</div>
          <div>包邮</div>
          <div>赠品</div>
        </div>
      </div>
      <div class="lix-gd__title">
        {{ sku.goodsinfo.title }}
      </div>
      <div class="lix-gd__suggest">
        {{sku.goodsinfo.slogan}}
        {{sku.goodsinfo.description}}
      </div>
      <div class="lix-gd__seperate"></div>
      <div class="lix-gd__skuinfo" @click="showBase = true">
        <div>规格：</div>
        <div class="info">{{ sku.initialSku.text }}</div>
      </div>
      <div class="lix-gd__seperate"></div>
      <div class="lix-gd__sale-container">
        <div>促销：</div>
        <div class="sale-wrapper">
          <div class="sale-content">
            <div>赠品</div>
            <div class="content">购买即赠送运动短裤一件</div>
          </div>
          <div class="sale-content">
            <div>包邮</div>
            <div class="content">本件商品单件包邮</div>
          </div>
          <div class="sale-content">
            <div>折扣</div>
            <div class="content">当前价格为折扣价格，9月28日恢复原价</div>
          </div>
        </div>
      </div>
      <div class="lix-gd__seperate"></div>
    </div>
    <div class="lix-gd__content">
      <div>商品介绍：</div>
      <div v-html="sku.goodsinfo.content"></div>
    </div>
    <div class="sku">
      <van-sku v-model="showBase" :sku="sku.sku" :goods="sku.goodsinfo" :goods-id="sku.goods_id" :hide-stock="sku.sku.hide_stock" :quota="sku.quota" :quota-used="sku.quota_used" :initial-sku="sku.initialSku" :close-on-click-overlay="closeOnClickOverlay" ref="skuData">
        <template slot="sku-actions" slot-scope="props">
          <div class="van-sku-actions">
            <van-button type="primary" bottom-action @click="onAddCartClicked" class="van-button van-button--default van-button--normal van-button--bottom-action">
              加入购物车
            </van-button>
          </div>
        </template>
      </van-sku>
    </div>
    <div class="lix-gd__footer">
      <van-goods-action>
        <van-goods-action-mini-btn icon="chat" text="客服" @click="onClickService" />
        <van-goods-action-mini-btn icon="cart" :info="sku.cartSkuCount" text="购物车" @click="pushWeblink({type:'cart'})" />
        <van-goods-action-big-btn text="加入购物车" @click="onAddCartClicked" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import {getSkuApi, cartAddApi} from '../../api'
import Vue from 'vue'
import { Swipe, SwipeItem, GoodsAction, GoodsActionBigBtn, GoodsActionMiniBtn, Sku, Toast, Button } from 'vant'
Vue.use(Swipe).use(SwipeItem).use(GoodsAction).use(GoodsActionBigBtn).use(GoodsActionMiniBtn).use(Sku).use(Toast).use(Button)

export default {
  data () {
    return {
      images: [
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541480624328&di=e5390c2f21a901ef26ed5005391d6458&imgtype=0&src=http%3A%2F%2Fwww.cssxt.com%2Fuploadfile%2F2017%2F0710%2F20170710025507466.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541480624326&di=9c919911fdea26a9481e71f1f3073e47&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F024f78f0f736afc3759aeb4fb819ebc4b7451201.jpg',
        'https://img.yzcdn.cn/2.jpg'
      ],
      sku: {
        sku: {},
        goods_id: 946755,
        alias: '2oml0r0n5vytj',
        quota: 0,
        is_virtual: 0,
        quota_used: 0,
        goodsinfo: {},
        initialSku: {},
        cartSkuCount: ''
      },
      closeOnClickOverlay: true,
      showBase: false
    }
  },
  created () {
    this.onLoad()
  },
  methods: {
    onLoad () {
      let skuid = this.$route.params.id
      getSkuApi(skuid)
        .then(res => {
          console.log(res)
          this.sku = res.data
        })
        .catch(e => {
          console.log(e)
        })
    },
    onClickMiniBtn () {
      console.log('点击图标')
    },
    onClickBigBtn () {
      console.log('点击图标')
    },
    onClickService () {
      Toast('客服消息')
    },
    onAddCartClicked () {
      Toast('加入购物车')
      let data = this.$refs.skuData.getSkuData()
      if (data.selectedSkuComb) {
        this.showBase = false
        let sku = data.selectedSkuComb
        let nums = data.selectedNum
        let goodsId = data.goodsId
        this.sku.initialSku = sku
        cartAddApi({
          goods: goodsId,
          sku: sku.id,
          nums: nums
        })
          .then(res => {
            this.sku.cartSkuCount = Number(res.data)
          })
          .catch(e => {
            console.log(e)
            this.$toast(e)
          })
      } else {
        this.$toast('请选择商品规格')
      }
    }
  }
}
</script>

<style lang="scss">
@import "../../theme-chalk/goods.scss";
</style>
